﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>III级机构设置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        .page-container {
            margin: 20px;
        }

        .el-table__header, .el-table__body {
            min-width: 800px;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .breadcrumb {
            margin-bottom: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <div id="app" class="page-container">
        <div class="breadcrumb">
            您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--III级机构设置--III级机构添加
        </div>

        <el-form :model="formData" ref="formRef" label-width="180px">
            <!-- I级机构选择 -->
            <el-form-item label="I级机构名称">
                <el-select v-model="formData.first_kind_id"
                           v-on:change="handleFirstKindChange"
                           placeholder="请选择I级机构名称"
                           class="input-width">
                    <el-option v-for="item in firstKindOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="II级机构名称">
                <el-select v-model="formData.second_kind_id"
                v-on:change ="handleSecondKindChange"
                           placeholder="请选择II级机构名称"
                           class="input-width">
                    <el-option v-for="item in secondKindOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <!-- III级机构编号（自动生成或手动输入） -->
            <el-form-item label="III级机构编号">
                <el-input v-model="formData.third_kind_id"
                          placeholder="请输入III级机构编号"
                          class="input-width"></el-input>
            </el-form-item>

            <!-- III级机构名称 -->
            <el-form-item label="III级机构名称">
                <el-input v-model="formData.third_kind_name"
                          placeholder="请输入III级机构名称"
                          class="input-width"
                          required></el-input>
            </el-form-item>

            <!-- 销售责任人编号 -->
            <el-form-item label="销售责任人编号">
                <el-input v-model="formData.third_kind_sale_id"
                          placeholder="请输入销售责任人编号"
                          class="input-width"
                          required></el-input>
               
            </el-form-item>

            <!-- 是否为零售店 -->
            <el-form-item label="是否为零售店">
                <el-select v-model="formData.third_kind_is_retail"
                           placeholder="请选择"
                           class="input-width">
                    <el-option label="是" value="是"></el-option>
                    <el-option label="否" value="否"></el-option>
                </el-select>
            </el-form-item>

            <!-- 操作按钮 -->
            <el-form-item>
                <el-button type="primary" v-on:click ="handleSubmit">提交</el-button>
                <el-button v-on:click="handleBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>

    <script>
        const { createApp, ref, reactive, watch } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                // 表单数据
                const formData = reactive({
                    first_kind_id: null,        // I级机构ID
                    first_kind_name: '',        // I级机构名称（自动填充）
                    second_kind_id: null,       // II级机构ID
                    second_kind_name: '',       // II级机构名称（自动填充）
                    third_kind_id: '',          // III级机构编号
                    third_kind_name: '',        // III级机构名称（必填）
                    third_kind_sale_id: '',      // 销售责任人编号
                    third_kind_is_retail: '是'    // 是否为零售店（默认是）
                });

                // I级机构选项（可从后端接口获取）
                const firstKindOptions = ref([
                    { value: null, label: '请选择I级机构' },
                    // { value: '02', label: 'Ⅰ级结构' },
                    { value: '01', label: '集团' },
                    { value: '03', label: '总部' }
                ]);

                // II级机构选项（动态加载）
                const secondKindOptions = ref([
                    { value: null, label: '请选择II级机构' },
                    { value: '01', label: '软件公司' },
                    { value: '02', label: '北京分校区' },
                    { value: '03', label: '湖南分校区' }
                ]);
        //             const handleFirstKindChange = (value) => {
        //   const selectedItem = firstKindOptions.value.find(item => item.value === value);
        //   formData.first_kind_id = value;
        //   formData.first_kind_name = selectedItem ? selectedItem.label : '';

        //   根据一级分类设置对应的二级分类
        //   if (selectedItem && selectedItem.label === '集团') {
        //     formData.second_kind_name = '集团子公司A';
        //   } else if (selectedItem && selectedItem.label === '总部') {
        //     formData.second_kind_name = '总部部门A';
        //   } else {
        //     formData.second_kind_name = ''; 默认清空二级分类
        //   }
        // };
                // 监听I级机构变化，加载II级机构数据
                watch(() => formData.firstKindId, async (newVal) => {
                    if (!newVal) return; // 未选择时清空II级选项

                    try {
                        const response = await axios.post(
                            '/HR_Fist/transfer/transferAction!findtwo.action',
                            { configThird: { firstKindId: newVal } },
                            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                        );

                        // 解析XML响应（假设后端返回标准XML格式）
                        const parser = new DOMParser();
                        const xmlDoc = parser.parseFromString(response.data, 'text/xml');
                        const items = xmlDoc.getElementsByTagName('item');
                        const options = [];

                        Array.from(items).forEach(item => {
                            options.push({
                                value: item.getAttribute('id'),
                                label: item.getAttribute('name')
                            });
                        });

                        secondKindOptions.value = [{ value: null, label: '请选择II级机构' }, ...options];
                        formData.secondKindId = null; // 清空II级选择
                    } catch (error) {
                        console.error('加载II级机构失败:', error);
                        ElMessage.error('加载II级机构数据失败');
                    }
                });
                const handleFirstKindChange = (value) => {
            const item = firstKindOptions.value.find(i => i.value === value);
            formData.first_kind_name = item?.label || '';
              const selectedItem = firstKindOptions.value.find(item => item.value === value);
          formData.first_kind_id = value;
          formData.first_kind_name = selectedItem ? selectedItem.label : '';
        };
                
                const handleSecondKindChange = (value) => {
            const item = secondKindOptions.value.find(i => i.value === value);
            formData.second_kind_name = item?.label || '';
        };
                // 提交表单
                const handleSubmit = () => {
                    
                   console.log('提交数据:', JSON.stringify(formData));
                    // 模拟提交（需替换为实际接口）
                    ElMessageBox.confirm('确认提交数据吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        axios.post("/config/thirdinsert", formData)
                          .then(res => {
                            if (res.data.success) {
                              ElMessage.success('提交成功');
                              // 跳转页面
                              window.location.href = '@Url.Action("config_file_third_kind", "config")';
                            }
                          })
                          .catch(err => {
                            ElMessage.error('提交失败');
                          });

                       
                        formData.thirdKindName = ''; // 清空表单
                    });
                };

                // 返回按钮
                const handleBack = () => {
                    window.history.back();
                };

                return {
                    formData,
                    firstKindOptions,
                    secondKindOptions,
                    handleFirstKindChange, // 可扩展处理
                    handleSecondKindChange, // 可扩展处理
                    handleSubmit,
                    handleBack
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>